import React from "react";
import PropTypes from "prop-types";

// 函数式组件中，第一个形参就是props，当然你可以自定义名称，不过不建议你这么做
export default function Sidebar(props) {
  // 通过解构赋值即可拿到props中的内容
  const { bg, bg2 } = props;
  return (
    <div>
      <li style={{ backgroundColor: bg }}>{bg}</li>
      <li style={{ backgroundColor: bg2 }}>{bg2}</li>
    </div>
  );
}
// 函数式组件的defaultProps和类型限制只能通过这种方式
Sidebar.defaultProps = {
  bg2: "red",
};

Sidebar.propTypes = {
  bg: PropTypes.string,
  bg2: PropTypes.string,
};
